<template>
    <div class="selectIcon">
        <div class="selectIcon-input" @click="show">
            <slot :icon="modelValue">
                <span v-if="modelValue" class="selectIcon-input-icon">
                    <i :class="modelValue"></i>
                </span>
                <span v-else class="selectIcon-input-placeholder">{{placeholder}}</span>
            </slot>
        </div>
        <p-el-dialog title="选择图标" :show-close="false" :show-ok="false" v-model="showDialog" top="30px" width="90%" :height="bodySize.height-130">
            <div class="selectIcon-list">
                <div v-for="(item,index) in iconList" :key="index" @click="clickIcon(item)">
                    <i :class="item"></i>
                </div>
            </div>
        </p-el-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import PElDialog from "@/components/PElDialog.vue";
import iconList from "@/lib/icon";
/**
 * state 数据类型
 */
interface IState {
    showDialog: boolean;
}
export default defineComponent({
    name: "SelectIcon",
    components: { PElDialog },
    props: {
        modelValue: {
            type: String,
            default: "",
        },
        placeholder: {
            type: String,
            default: "请选择图标",
        },
    },
    emits:["update:modelValue"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const state = reactive<IState>({
            showDialog: false,
        });
        /**
         * 显示图片选择框
         */
        const show = () => {
            state.showDialog = true;
        };
        /**
         * 选择图标
         */

        const clickIcon = (val: string) => {
            state.showDialog = false;
            emit("update:modelValue", val);
        };
        return {
            UIAuth,
            bodySize,
            iconList,
            ...toRefs(state),
            show,
            clickIcon,
        };
    },
});
</script>


<style scoped lang="scss">
.selectIcon {
    &-input {
        cursor: pointer;
        border-radius: 4px;
        border: 1px $border-color1 solid;
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        &-placeholder {
            color: $text-placeholder-color;
        }
    }
    &-list {
        & > div {
            display: inline-block;
            font-size: 35px;
            margin: 10px;
            cursor: pointer;
            transition: all 0.3s;
            &:hover {
                color: $primary-color;
                text-shadow: 0 0 10px $primary-color;
                transform: scale(1.8);
            }
        }
    }
}
</style>